<template>
  <div class="fullscreen-container">
    <iframe src="/Visualization/operational-data/index.html" class="dashboard-iframe" ref="dashboardIframe"></iframe>
    <el-button type="primary" @click="goBack" class="floating-back-button">
      <el-icon><ArrowLeftBold /></el-icon>
    </el-button>
    <div v-if="loading" class="loading-overlay">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <span class="loading-text">数据加载中...</span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowLeftBold, Loading } from '@element-plus/icons-vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const router = useRouter();
const dashboardIframe = ref(null);
const loading = ref(true);
let dataRefreshInterval = null;

const goBack = () => {
  router.push('/store-dashboard-hub');
};

// 从后端获取运营数据
const fetchOperationalData = async () => {
  try {
    loading.value = true;
    console.log('开始获取运营数据...');
    
    // 调用后端API获取数据
    const response = await axios.get('/api/dashboard/operational-data/');
    const data = response.data;
    console.log('获取到运营数据:', data);
    
    // 数据准备好后，发送给iframe
    sendDataToIframe(data);
    loading.value = false;
  } catch (error) {
    console.error('获取运营数据失败:', error);
    ElMessage.error('数据获取失败，请检查网络连接或联系管理员');
    loading.value = false;
  }
};

// 向iframe发送数据
const sendDataToIframe = (data) => {
  if (dashboardIframe.value && dashboardIframe.value.contentWindow) {
    // 使用postMessage发送数据到iframe
    dashboardIframe.value.contentWindow.postMessage({
      type: 'operational-dashboard-data',
      data: data
    }, '*'); // 生产环境建议替换'*'为具体域名
    console.log('数据已发送到大屏', data);
  } else {
    console.warn('iframe尚未加载完成，稍后重试发送数据');
  }
};

// iframe加载完成后的处理
const handleIframeLoad = () => {
  console.log('大屏iframe已加载完成');
  // iframe加载完成后立即获取并发送一次数据
  fetchOperationalData();
};

onMounted(() => {
  // 监听iframe的load事件
  if (dashboardIframe.value) {
    dashboardIframe.value.addEventListener('load', handleIframeLoad);
  }
  
  // 设置定时刷新（每5分钟刷新一次）
  dataRefreshInterval = setInterval(fetchOperationalData, 300000);
});

onUnmounted(() => {
  // 组件卸载时清除定时器和事件监听
  if (dataRefreshInterval) {
    clearInterval(dataRefreshInterval);
  }
  
  if (dashboardIframe.value) {
    dashboardIframe.value.removeEventListener('load', handleIframeLoad);
  }
});
</script>

<style scoped>
.fullscreen-container {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.dashboard-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.floating-back-button {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 999;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.3s;
  background-color: rgba(0, 180, 220, 0.15);
  border-color: rgba(0, 180, 220, 0.3);
  color: #e0fbfc;
}

.floating-back-button:hover {
  opacity: 1;
  background-color: rgba(0, 180, 220, 0.25);
  border-color: rgba(0, 180, 220, 0.5);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 998;
}

.loading-icon {
  font-size: 36px;
  color: #00c6ff;
  animation: spin 1.5s linear infinite;
}

.loading-text {
  margin-top: 15px;
  color: #e0fbfc;
  font-size: 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 